<template>
  <a-avatar
    :alt="alt"
    :cross-origin="crossOrigin"
    :draggable="draggable"
    :gap="gap"
    :icon="icon"
    :load-error="loadError"
    :shape="shape"
    :size="size"
    :src="src"
    :srcset="srcset"
  >
    <template v-if="$slots.icon" #icon>
      <slot name="icon" />
    </template>
    <slot />
  </a-avatar>
</template>

<script>
import { defineComponent } from 'vue'
import { Avatar } from 'ant-design-vue'
export default defineComponent({
  name: 'ZAvatar',
  components: {
    AAvatar: Avatar
  },
  props: {
    alt: {
      type: String,
      default: undefined
    },
    crossOrigin: {
      type: String,
      default: undefined
    },
    draggable: {
      type: Boolean,
      default: undefined
    },
    gap: {
      type: Number,
      default: 4
    },
    icon: {
      type: Function,
      default: undefined
    },
    loadError: {
      type: [Function, Boolean],
      default: undefined
    },
    shape: {
      type: String,
      default: 'circle'
    },
    size: {
      type: String,
      default: 'default'
    },
    src: {
      type: String,
      default: undefined
    },
    pagination: {
      type: String,
      default: undefined
    }
  }
})
</script>
